<template>
  <el-container class="setting-center_mall-info-setting_mall-base-edit">
    <el-main class="footer-fixed">
      <el-form ref="mallBaseForm" :model="params" :rules="rules" label-width="6rem">
        <el-tabs v-model="activeName" type="border-card" class="tabs-content">
          <el-tab-pane label="基本信息" name="1">
            <div class="base-info">
              <div class="icon-upload">
                <label><span>*</span> 商场图标：</label>
                <upload ref="iconImg" :limit="1" list-type="picture-card" :file-list="iconFileList" :disabled="false" class="mb18" :file-filter="filterImgType" :name-show="false" />
                <span class="form-item-hint">(100*100，大小低于1M，格式为：png、jpg、jpeg)</span>
              </div>
              <div class="basics-info">
                <el-row :gutter="40">
                  <el-col :span="22">
                    <el-form-item label="商场编号：" prop="code" class="detail-row">
                      <el-input v-model="params.code" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="商场简称：" prop="simpleName" class="detail-row">
                      <el-input v-model="params.simpleName" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="商场全称：" prop="allName" class="detail-row">
                      <el-input v-model="params.allName" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="商场状态：" prop="status" class="detail-row">
                      <el-select v-model="params.status">
                        <el-option v-for="item in dicInfo" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="开业日期：" prop="openingDate" class="detail-row">
                      <el-date-picker v-model="params.openingDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="营业时间：" prop="businessHours" class="detail-row">
                      <el-time-picker
                        v-model="params.businessHours"
                        is-range
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        value-format="HH:mm"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="客服电话：" prop="supportTel" class="detail-row">
                      <el-input v-model="params.supportTel" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="建筑面积：" prop="buildArea" class="detail-row flex-just">
                      <el-input v-model="params.buildAreas" @focus="buildAreaF" @blur="buildAreaB" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="可租面积：" prop="useArea" class="detail-row  flex-just">
                      <el-input v-model="params.useAreas" @focus="useAreaF" @blur="useAreaB" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="备注信息：" prop="remark" class="detail-row">
                      <el-input v-model="params.remark" type="textarea" :rows="3" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="位置信息" name="2">
            <div class="base-info">
              <div class="basics-info">
                <el-row :gutter="40">
                  <el-col :span="18">
                    <el-form-item label="所在城市：" prop="cityArr" class="detail-row">
                      <provinceCity ref="refProvinceCity" :key="cityKey" :city-arr="params.cityArr" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="详细地址：" prop="address" class="detail-row">
                      <el-input v-model="params.address" @blur="mapSearch()" />&nbsp;
                      <el-button class="image-link-button" size="mini" @click="mapSearch()">地图搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div id="map-location" class="map-info" />
          </el-tab-pane>
          <el-tab-pane label="商场图片" name="3">

            <el-row :gutter="40">
              <el-col :span="18">
                <el-form-item class="noMargin">
                  <upload ref="logoImg" :limit="20" :file-list="logoFileList" :disabled="false" class="mb18" :file-filter="filterImgType" :name-show="false" />
                  <span class="form-item-hint">(100*100，大小低于1M，格式为：png、jpg、jpeg)</span>
                </el-form-item>
              </el-col>
            </el-row>

          </el-tab-pane>

        </el-tabs>
      </el-form>
      <div class="btn-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getAreaTreeList } from '@/api/common'
import { getTenement, addTenement, modifyTenement } from '@/api/tenement'
import { searchAllDictionaries } from '@/api/public'
import upload from '@/components/upload'
import provinceCity from '@/components/provinceCity'
import { removeNumber, filterPriceInput } from '@/utils/filter'
export default {
  components: {
    upload,
    provinceCity
  },
  data() {
    return {
      activeName: '1',
      placeSearch: null,
      params: {
        address: '',
        city: '',
        cityArr: []
      },
      cityKey: 0,
      addCheck: false,
      options: [],
      dicInfo: [],
      logoFileList: [],
      iconFileList: [],
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      rules: {
        name: [
          { required: true, message: '请输入商场全称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入商场编号', trigger: 'blur' }
        ],
        simpleName: [
          { required: true, message: '请输入商场简称', trigger: 'blur' }
        ],
        allName: [
          { required: true, message: '请输入商场全称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择商场状态', trigger: 'blur' }
        ],
        openingDate: [
          { required: true, message: '请选择开业日期', trigger: 'blur' }
        ],
        businessHours: [
          { required: true, message: '请选择营业时间', trigger: 'blur' }
        ],
        cityArr: [
          { required: true, message: '请选择所在城市', trigger: 'blur' }
        ],
        supportTel: [
          { required: true, message: '请填写客服电话', trigger: 'blur' }
        ],
        buildArea: [
          { required: true, message: '请填写建筑面积', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ],
        useArea: [
          { required: true, message: '请填写可租面积', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请填写备注信息', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAreaList()
    this.getDicInfo()
  },
  mounted() {
    this.mapInit()
  },
  methods: {
    buildAreaF() {
      this.params.buildAreas = removeNumber(this.params.buildAreas)
    },
    buildAreaB(val) {
      this.params.buildArea = val.currentTarget.value
      this.$set(this.params, 'buildAreas', filterPriceInput(val.currentTarget.value))
    },
    useAreaF() {
      this.params.useAreas = removeNumber(this.params.useAreas)
    },
    useAreaB(val) {
      this.params.useArea = val.currentTarget.value
      this.$set(this.params, 'useAreas', filterPriceInput(val.currentTarget.value))
    },
    getDicInfo() {
      searchAllDictionaries({
        type: 'tenant_market_status'
      }).then(response => {
        this.dicInfo = response
        this.getInfo()
      })
    },
    getInfo() {
      getTenement({}).then(response => {
        if (!response) {
          this.addCheck = true
          this.params = {
            address: '',
            city: '',
            cityArr: [],
            status: ''
          }
        } else {
          this.iconFileList = [
            {
              url: response.icon
            }
          ]
          this.logoFileList = [
            {
              url: response.logo
            }
          ]
          response.status = response.status.toString()
          this.params = response
          this.params.cityArr = [response.province.toString(), response.city.toString(), response.county.toString(), response.streetTown.toString()]
          this.cityKey++
          this.params.businessHours = [new Date(2021, 1, 20, response.bizStart.split(':')[0], response.bizStart.split(':')[1]), new Date(2021, 1, 20, response.bizEnd.split(':')[0], response.bizEnd.split(':')[1])]
          this.$set(this.params, 'buildAreas', filterPriceInput(this.params.buildArea))
          this.$set(this.params, 'useAreas', filterPriceInput(this.params.useArea))
          this.mapSearch()
        }
      })
    },
    submit() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      if (this.$refs.refProvinceCity.nameIdArr.length === 0) {
        this.$message.error('所在城市不能为空')
        return
      }
      this.params.cityArr = this.$refs.refProvinceCity.nameIdArr
      this.$refs.mallBaseForm.validate(valid => {
        if (valid) {
          if (!this.$refs.iconImg.key || this.$refs.iconImg.key.length < 1) {
            this.$message.error('商场图标不能为空')
            return
          }

          if (!this.$refs.logoImg.key || this.$refs.logoImg.key.length < 1) {
            this.$message.error('商场logo不能为空')
            return
          }
          if (!this.params.lng || !this.params.lat) {
            this.$message.error('详细地址必须为有效地址')
            return
          }
          this.params.province = this.$refs.refProvinceCity.nameIdArr[0]
          this.params.city = this.$refs.refProvinceCity.nameIdArr[1]
          this.params.county = this.$refs.refProvinceCity.nameIdArr[2]
          this.params.streetTown = this.$refs.refProvinceCity.nameIdArr[3]
          this.params.bizStart = this.params.businessHours[0]
          this.params.bizEnd = this.params.businessHours[1]
          this.params.icon = this.$refs.iconImg.key[0].urlName
          this.params.logo = this.$refs.logoImg.key[0].urlName
          if (this.addCheck) {
            addTenement(this.params).then(response => {
              this.$message.success('保存成功')
              this.getInfo()
            })
          } else {
            modifyTenement(this.params).then(response => {
              this.$message.success('修改成功')
              this.getInfo()
            })
          }
        }
      })
    },
    mapInit() {
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map('map-location', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 16 // 初始地图级别
      })
      this.mapSearch()
    },
    mapSearch() {
      const _this = this
      AMap.plugin('AMap.AutoComplete', function() {
        var autoOptions = {
          // city 限定城市，默认全国
          city: _this.$refs.refProvinceCity.nameIdArr ? _this.$refs.refProvinceCity.nameIdArr[1] : '全国',
          citylimit: true
        }
        // 实例化AutoComplete
        var autoComplete = new AMap.AutoComplete(autoOptions)
        // 根据关键字进行搜索
        autoComplete.search(_this.params.address, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (result !== 'NO_PARAMS' && result.tips && result.tips[0].location) {
            _this.map.setCenter([result.tips[0].location.lng, result.tips[0].location.lat])
            _this.params.lng = result.tips[0].location.lng
            _this.params.lat = result.tips[0].location.lat
            var marker = new AMap.Marker({
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
              position: [result.tips[0].location.lng, result.tips[0].location.lat]
            })
            _this.map.add(marker)
            _this.map.setFitView()
          } else {
            if (_this.params.address) {
              _this.params.lng = ''
              _this.params.lat = ''
              _this.$message.error('查无此地址')
            }
          }
        })
      })
    },
    getAreaList() {
      getAreaTreeList({
        code: '000000'
      }).then(response => {
        this.areaList = response
      })
    }
  }
}
</script>

<style lang="scss">
  .setting-center_mall-info-setting_mall-base-edit {
    padding: 4px;
    height: 100%;
    border-radius: 3px;
    overflow: auto;
    .tabs-content{
      flex: auto;
      height: 100%;
      display: flex;
      overflow: auto;
      margin-bottom: 10px;
      flex-direction: column;
      .el-tabs__content {
          flex-grow: 1;
          overflow-y: auto;
      }
    }
    .btnList {
      display: flex;
      justify-content:center;
      margin-top: 20px;
    }
    .base-info {
      display: flex;
      height: 100%;
      margin: 10px auto;
      .icon-upload {
        margin-right:50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        >label {
          margin-bottom: 10px;
        }
        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 5px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
          }
        }
      }
      .basics-info {
        width: 100%;
        max-width: 860px;
        height: 100%;
        margin: 10px auto;
      }
      .detail-row{
        height: 18px;
      }
      .form-item-hint{
        position: relative;
        display: inline-flex;
        padding: 40px 0 ;
        margin:0 auto;
        font-size: 8px;
        vertical-align: bottom;
        color: #666;
      }
    }
    .el-form-item  {
      margin-bottom: 5px;
    }
    .map-info {
      display: flex;
      border: 1px solid #adadad;
      width: 100%;
      max-width: 860px;
      height: 400px;
      margin: 0 auto;
    }
    .el-col {
      margin-bottom: 30px;
    }
    .noMargin {
      margin-bottom: 0 !important;
      padding-bottom: -10px;
    }
    .image-link-button{
       margin-left: 4px;
       font-size: 12px;
       align-items: center;
    }
  }
</style>
